<template>
  <div>
    <img src="../assets/news.png" alt="">
    <div class="content">
      <div class="types">
        <div :class="type === '1' ? 'isHover' : ''" @mouseover="over('1')">健康贴士</div>
        <div :class="type === '2' ? 'isHover' : ''" @mouseover="over('2')">体检常识</div>
      </div>
      <div class="titles">
        <div class="title" v-for="(item, index) in titles" :key="index" @click='linkFun(item)'>
          <div>{{ item.title }}</div>
          <div>{{ item.date }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jkts: [
        {
          title: '回首2016年移动医疗领域五大关键词',
          date: '2018-03-21',
          content: [
            '自2014年以来，移动医疗这场大戏已经上演了三年。不论是“老牌”企业，还是雨后春笋般地新创企业，纷纷打出推助医改，优化就医流程以及改善医疗体系等口号，将诸多环节搬到线上。2016年是移动医疗变革年后的高歌猛进，亦是从移动医疗到智慧医疗的转型年。这一年注定是不平凡的一年，从风口到凡间，从形式上的移动到内在的链接。',
            '2016年有属于自己的关键词，精准医疗与大数据，医用机器人，虚拟现实等，这些关键词与移动融为一体，形成新的业态，新的未来移动医疗。',
            '1.精准医疗',
            '在美国总统宣布启动精准医学计划一年后，中国也已经在后确定了大型的项目计划。为了在这一计划中抢占先机，这一年有很多的研究机构，包括XX大学、XX大学和XX医学科学院，都正争先恐后地建设精准医学中心。1月初，XX科学院正式启动部署项目“XXX医学研究计划”。该计划是由XX基因组研究所牵头、多个院所参加的。这支交叉学科团队将在4年内完成4000个志愿者的DNA样本和多种表现型数据的采集，并对其中2000人进行深入的精准医学研究。2016年9月底，国家研发计划“精准医学研究”专项共有56个项目得以确立。',
            '我们将放在了尤其致命性的疾病及更常见的特定癌症，如胃癌、肝癌、乳腺癌、脑血管等领域。在这一年令人振奋的是中国学者在国际优质期刊上发表重要研究成果，将中国原创研究推向世界。'
          ]
        }
      ],
      tjcs: [
        {
          title: '医疗对健康的促进不到10%',
          date: '2018-03-12',
          content: [
            '自2014年以来，移动医疗这场大戏已经上演了三年。不论是“老牌”企业，还是雨后春笋般地新创企业，纷纷打出推助医改，优化就医流程以及改善医疗体系等口号，将诸多环节搬到线上。2016年是移动医疗变革年后的高歌猛进，亦是从移动医疗到智慧医疗的转型年。这一年注定是不平凡的一年，从风口到凡间，从形式上的移动到内在的链接。',
            '2016年有属于自己的关键词，精准医疗与大数据，医用机器人，虚拟现实等，这些关键词与移动融为一体，形成新的业态，新的未来移动医疗。',
            '1.精准医疗',
            '在美国总统宣布启动精准医学计划一年后，中国也已经在后确定了大型的项目计划。为了在这一计划中抢占先机，这一年有很多的研究机构，包括XX大学、XX大学和XX医学科学院，都正争先恐后地建设精准医学中心。1月初，XX科学院正式启动部署项目“XXX医学研究计划”。该计划是由XX基因组研究所牵头、多个院所参加的。这支交叉学科团队将在4年内完成4000个志愿者的DNA样本和多种表现型数据的采集，并对其中2000人进行深入的精准医学研究。2016年9月底，国家研发计划“精准医学研究”专项共有56个项目得以确立。',
            '我们将放在了尤其致命性的疾病及更常见的特定癌症，如胃癌、肝癌、乳腺癌、脑血管等领域。在这一年令人振奋的是中国学者在国际优质期刊上发表重要研究成果，将中国原创研究推向世界。'
          ]
        }
      ],
      type: '1',
      titles: []
    };
  },
  created() {
    this.titles = this.jkts
  },
  methods: {
    over(type) {
      this.type = type;
      this.titles = type === '1' ? this.jkts : this.tjcs
    },
    linkFun(data) {
      console.log(data)
      this.$router.push({
        path: '/detail',
        query: data
      })
    }
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100vw;
  height: 300px;
}
.content {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
}
.types div {
  width: 200px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  transition: .5s;
}
.types div:hover {
  height: 120px;
  line-height: 120px;
  color: #fff;
}
.isHover {
  background: #ed3da1!important;
  height: 120px!important;
  line-height: 120px!important;
  color: #fff!important;
}
.titles {
  width: 100%;
}
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px dashed #999;
  cursor: pointer;
}
.title:hover {
  color: orange;
}
</style>
